import React, { useEffect ,useState} from "react";
import NavBarBox from "../../components/NavBar";
import { Calendar,List,InfiniteScroll } from "antd-mobile";
import request from "../../utils/request";
import './index.scss'
import { useNavigate } from "react-router-dom";
const ShowTim = () => {
    const [list, setList] = useState([])
    const [hasMore, setHasMore] = useState(true)
    const navigate=useNavigate()
    const getShowList=async()=>{
        // 用axios将日历底部的列表数据请求回来并渲染在日历下面
        const res=await request.post('/api/actor/list',{
            city:'北京',
            startTime:'',
            endTime:'',
            keywords:''
        })
        setList((prev)=>[...prev,...res.data.data])
        setHasMore(res.data.data.length > 0)

    }
    useEffect(()=>{
        getShowList()
    },[])
  return (
    <div>
      <NavBarBox title={"北京演出日历"} />
      {/* 实现日历组件的渲染，使用antd-mobile的日历组件，对当前月的所有日期底部添加红点标注 */}
      <Calendar
        renderLabel={() => {
          return <div style={{color:'red',fontSize:'30px'}}>.</div>
        }}
      />
      <div>
      {/* 用axios将日历底部的列表数据请求回来并渲染在日历下面 */}
      <List>
        {
            list.map((item,index)=>{
                return <List.Item key={index} onClick={()=>navigate(`/detail/${item.id}`)}>
                    <div className="listItem">
                        <div className="imgBox">
                            <img src={item.coverImageUrl} alt="" />
                        </div>
                        <div className="right">
                            <h3>{item.name}</h3>
                            <p>{item.location}</p>
                            <p style={{fontWeight:'bold',color:'black'}}>￥{item.price}</p>
                        </div>
                    </div>
                </List.Item>
            })
        }
        
      </List>
      {/* .日历底部的列表实现触底加载更多的懒加载效果 */}
      <InfiniteScroll loadMore={getShowList} hasMore={hasMore} />
      </div>
    </div>
  );
};

export default ShowTim;
